<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title> 
  </head>
  <body>
    <!-- <svg width="200" height="120" viewBox="0 0 200 120" style="shape-rendering: crispEdges;">
      <rect
        x="10" y="10"
        width="180" height="100"
        fill="none"
        stroke="#e74c3c"
        stroke-width="4"
        stroke-dasharray="6,10"
        stroke-linecap="round"
      >
        <animate
          attributeName="stroke-dashoffset"
          from="0" to="-30"
          dur="1.5s"
          repeatCount="indefinite"
          calcMode="linear"
        />
      </rect>
    </svg> -->

    <!-- <style>
      .svg-border-div {
        width: 200px;
        position: relative;
        padding: 10px; /* 避免内容覆盖边框 */
        background-image: url('./dasharray.svg');
        background-size: 100% 100%;
      }
     
    </style>
    <div class="svg-border-div">内容区域（不会旋转）</div> -->

    <style>
      /* .adaptive-border-container {
        background: url(./aaa.gif);
        background-size: 100% 100%;
      }

      .adaptive-border-container2 {
        background: url(./01.svg);
        background-size: 100% 100%;
      }

      @keyframes border-animate {
  0%, 100% {
    clip-path: inset(0 0 148px 0);
  }
  25% {
    clip-path: inset(0 298px 0 0);
  }
  50% {
    clip-path: inset(148px 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 298px);
  }
}

.main {
  width: 300px;
  height: 150px;
}
.animated-border {
  position: relative;
  display: block;
  box-sizing: border-box;
  text-align: center;
  font-size: 24px;
  line-height: 150px;
  color: #fed75a;
}
.animated-border::before, .animated-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  border: 2px solid #fed75a;
  animation: border-animate 5s linear infinite;
}
.animated-border::after {
  animation-delay: -2.5s;
}

.box {
  margin: 20px;
  width: 150px;
}
.content {
  position: relative;
  margin: auto;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  
  &:hover {
      filter: contrast(1.1);
  }
  
  &:active {
      filter: contrast(0.9);
  }
  
  &::before,
  &::after {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 2px solid gold;
      transition: all .5s;
      animation: clippath 3s infinite linear;
      border-radius: 10px;
  }
  
  &::after {
      animation: clippath 3s infinite -1.5s linear;
  }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 98% 0);
    }
    
    25% {
        clip-path: inset(0 98% 0 0);
    }
    50% {
        clip-path: inset(98% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 98%);
    }
}

.bg::before {
    background: rgba(255, 215, 0, .5);
} */
.name.border-active {
  padding: 4px;
  position: relative;
  margin: auto;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  /* 确保伪元素定位正确 */
}

/* 悬停/点击效果（保持不变） */
.name.border-active:hover {
  filter: contrast(1.1);
}

.name.border-active:active {
  filter: contrast(0.9);
}

/* 双线条边框动画（GPU加速优化） */
.name.border-active::before,
.name.border-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #1E90FF;
  animation: clippath 3s infinite linear;
  /* 强制GPU加速 */
  transform: translateZ(0);
  will-change: clip-path;
  /* 避免锯齿 */
  backface-visibility: hidden;
}

/* 第二条线延迟1.5秒，形成交错动画 */
.name.border-active::after {
  animation-delay: -1.5s;
}

/* 原始裁剪路径动画（完全不变） */
@keyframes clippath {

  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }

  25% {
    clip-path: inset(0 98% 0 0);
  }

  50% {
    clip-path: inset(98% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 98%);
  }
}
    </style>
    <!-- <span class="adaptive-border-container">
      你的内容1111
    </span> -->

    <!-- <div class="box">
       <div class="content">你的内容2222</div>
    </div> -->

    <!-- <div class="main">
      <div class="animated-border">
        你的内容2222
      </div>
    </div> -->
    
    <div class="name border-active">你的内容2222</div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="96" width="96" background="black">
      <style>
       @keyframes left {to {transform: translate(-32px, 0)}}
       @keyframes down {to {transform: translate(0, 32px)}}
       @keyframes right {to {transform: translate(32px, 0)}}
       @keyframes up {to {transform: translate(0, -32px)}}
      </style>
      <defs>
       <circle id="skull" cx="16" cy="16" r="8" fill="red"/>
      </defs>
      <g transform="translate(0,0)">
       <!-- 原始 8 个圆点 -->
       <use href="#skull" x="0" y="0" style="animation: down 0.4s infinite linear"/>
       <use href="#skull" x="32" y="0" style="animation: left 0.4s infinite linear"/>
       <use href="#skull" x="64" y="0" style="animation: left 0.4s infinite linear"/>
       <use href="#skull" x="0" y="32" style="animation: down 0.4s infinite linear"/>
       <use href="#skull" x="0" y="64" style="animation: right 0.4s infinite linear"/>
       <use href="#skull" x="32" y="64" style="animation: right 0.4s infinite linear"/>
       <use href="#skull" x="64" y="64" style="animation: up 0.4s infinite linear"/>
       <use href="#skull" x="64" y="32" style="animation: up 0.4s infinite linear"/>
      </g>
     </svg>
  </body>
</html>
